<template>
  <div class="remark">
    <div class="remark-content" v-if="remarkList.length > 0">
      <div class="remark-item" v-for="item in remarkList" :key="item.id">
        <div class="remark-item-header">
          <div style="cursor: pointer" @click="otherUserInfo(item)">
            <el-avatar
              size="small"
              style="border: 1px solid #ccc"
              :src="item.avatar || defaultAvatar"
            ></el-avatar>
          </div>
          <div class="remark-item-header-info">
            <div
              class="remark-item-header-info-name"
              @click="otherUserInfo(item)"
            >
              <span>{{ item.nickname }}</span> 看过
            </div>
            <el-rate v-model="item.rate" disabled text-color="#ff9900">
            </el-rate>
            <div class="remark-item-header-info-time">{{ item.time }}</div>
          </div>
        </div>
        <div class="remark-item-content">{{ item.content }}</div>
      </div>
    </div>
    <div class="remark-empty" v-else>
      <el-empty description="暂无评论"></el-empty>
    </div>
  </div>
</template>

<script>
import defaultAvatar from "@/assets/defaultAvatar.png";
export default {
  name: "RemarkView",
  data() {
    return {
      defaultAvatar,
    };
  },
  props: {
    remarkList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    // 查看其他用户信息
    otherUserInfo(user) {
      const url = `#/user/other/${user.userId}`;
      window.open(url, "_blank");
    },
  },
};
</script>

<style lang="less" scoped>
.remark {
  .remark-content {
    .remark-item {
      border-top: 1px solid #ddd;
      padding: 10px 0;
      .remark-item-header {
        margin-bottom: 5px;
        display: flex;
        align-items: flex-end;
        .remark-item-header-info {
          margin-left: 4px;
          display: flex;
          font-size: 13px;
          .remark-item-header-info-name {
            margin-right: 4px;
            span {
              color: rgb(51, 119, 170);
              cursor: pointer;
            }
          }
          .remark-item-header-info-time {
            margin-left: 5px;
            color: #aaa;
          }
        }
      }
      .remark-item-content {
        font-size: 13px;
        line-height: 19px;
        color: #777;
      }
    }
  }
}
</style>